<!DOCTYPE html>
<style>
.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: lightgrey;
}

.parent {
  height: 100%;
  width: 6px;
  background-color: black;
}

.child {
  position: relative;
  display: inline-block;
  height: 30px; 
  width: 6px;
  top: 50%;
  background-color: red;
}

</style>
<!--
Tests that the element with class "child" is invalidated when the browser is resized,
since its position is relative to the size of the frame.
-->
<div class="container">
  <div class="parent">
    <div class="child"></div>
  </div>
</div>
